<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>The Golden Grid (typography)</title>
	<meta name="author" content="Vladimir Carrer">
<link rel="stylesheet" href="CSS/golden-extend/reset.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="CSS/golden-extend/golden.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="CSS/golden-extend/typography.css" type="text/css" media="screen, projection">

<style>
h1 {border-bottom:1px solid; padding-bottom:20px}
.r{float:right}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/hash-link.js"></script>
<script type="text/javascript">
$(function() {
	var el = $('.article').find('div, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, address, img, q, dl, ol, ul, form, table, tr');
	
	el.each(function(i){
		$(this).attr('id', 'hl'+i).append("<a href='#hl" +i+ "' title='Permalink to this part' class='hlink'>#</a>");
    });//each
    
    el.css('position','relative');
    $('.hlink').hide();
    $('.hlink').css(
    {
    	position: 'absolute',
    	top: 0,
    	left: '-12px'
    });
    el.each(function(){
    	var o = $(this);
    	o.hover(
    		function(){
    			o.children('.hlink').show();
    		},
    		function(){
    			timeOut = setTimeout(function(){
    				o.children('.hlink').hide();
    			}, 1500);
    		}
    	);
    });
    

});


</script>

</head>
<body>
<div class="main">
<div class="g960"><h1>Level 01 Heading</h1></div>
<div class="clear">&nbsp;</div>

<div class="g480 article">

<h2>Level 02 Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. <a href="#">Link</a> Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, <a href="#">Link</a> ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
</p>

<a href="http://www.flickr.com/photos/pellesten/4611644083/"><img src="http://farm4.static.flickr.com/3335/4611644083_2ec8ee93a0_m.jpg" alt="Image" /></a>

<p>
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
</p>
<h3>Level 03 Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh.
</p>

<h4><a href="#">Link</a> Level 04 Heading</h4>
<p>
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
</p>

<h5>Level 05 Heading</h5>
<p>
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede.
</p>

<p>Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
</p>

<h6>Level 06 Heading</h6>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Link</a> Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. <a href="#">Link</a> Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
</p>

<p>
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
</p>

 <h3>Unordered lists</h3>
      <ul>
        <li>Lorem ipsum dolor sit amet <a href="#">Link</a></li>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
        <li><a href="#">Link</a> Ut enim ad minim veniam</li>
      </ul>
<h3>Ordered lists</h3>
      <ol>
        <li><a href="#">Link</a> Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore</li>
        <li>Et dolore magna aliqua</li>
      </ol>
	  
<h3>Blockquotes</h3>

      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href="#">Link</a> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </blockquote>

     <h3>Tables</h3>
      <table>
	  <caption>Jimi Hendrix - albums</caption>
	  <thead>
        <tr>
          <th>Album</th>
          <th>Year</th>
          <th>Price</th>
        </tr>
		</thead>
			  <tfoot>
        <tr>
          <td>Album</td>
          <td>Year</td>
          <td>Price</td>
        </tr>
		</tfoot>
		<tbody>
        <tr>
          <td>Are You Experienced <a href="#">Link</a></td>
          <td>1967</td>
          <td>$10.00</td>
        </tr>
        <tr>
          <td>Axis: Bold as Love</td>
          <td>1967</td>
          <td>$12.00</td>
        </tr>
		 <tr>
          <td>Electric Ladyland</td>
          <td>1968</td>
          <td>$10.00</td>
        </tr>
        <tr>
          <td>Band of Gypsys</td>
          <td>1970</td>
          <td>$12.00</td>
        </tr>
				<tbody>
      </table>
     <p>
	    <a href="#">Link</a><br>
        <strong>&lt;strong&gt;</strong><br>
        <del>&lt;del&gt; deleted</del><br>
        <dfn>&lt;dfn&gt; dfn</dfn><br>
        <em>&lt;em&gt; emphasis</em>
      </p>
<pre>
<code>&lt;html&gt;</code>
	<code>&lt;head&gt;</code>
	<code>&lt;/head&gt;</code>
	<code>&lt;body&gt;</code>
	<code>&lt;div class = "main"&gt; &lt;div&gt;</code>
	<code>&lt;/body&gt;</code>
<code>&lt;/html&gt; </code>
</pre>

      <tt>&lt;tt&gt;
     Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
      </tt>

    <hr>
</div>

<div class="g320 r">
 <h3>Unordered lists</h3>
      <ul>
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
        <li>Ut enim ad minim veniam</li>
      </ul>
<h3>Ordered lists</h3>
      <ol>
        <li>Consectetur adipisicing elit</li>
        <li>Sed do eiusmod tempor incididunt ut labore</li>
        <li>Et dolore magna aliqua</li>
      </ol>
</div>
</div>
</body>